<!doctype html>
<html>
<head>
<title>AutoSizingTextArea Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body { height: 850px; }
textarea {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
} 
DIV.small {
  padding: 5px;
  width: 300px;
  border: 2px solid #999;
}
DIV.large {
  padding: 10px;
  width: 300px;
  border: 2px solid #999;
}
DIV.small textarea, DIV.large textarea {
  border: 1px dotted #eee;
}
DIV.large textarea {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5em;
}
</style>
</head>
<body>
<div class="desc">The Large TextArea is a rather extreme example, but it shows how it adjusts for styling.
<br><br>
The grey dotted line is there to show the real textarea. Except for
font and line-height, style the container, not the textarea.
<br><br>For IE, it helps to specify the font-family for textarea.
<br><br>If things aren't working as expected, use development tools like
Firebug to inspect the textarea and its shadow and make sure the
computed styles match.
<br><br>Here are the styles used in this page:
<pre>
textarea {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
} 
DIV.small {
  padding: 5px;
  width: 300px;
  border: 2px solid #999;
}
DIV.large {
  padding: 10px;
  width: 300px;
  border: 2px solid #999;
}
DIV.small textarea, DIV.large textarea {
  border: 1px dotted #eee;
}
DIV.large textarea {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5em;
}
</pre>
</div>
<h2>AutoSizingTextArea Demo</h2>
<h3>Small TextArea</h3>
<div id="small"></div>
<h3>Large TextArea</h3>
<div id="large"></div>
<script language="JavaScript" type="text/javascript" src="com.tractionsoftware.gwt.demo.autosizingtextarea.AutoSizingTextAreaDemo.nocache.js"></script>
</body>
</html>
